import styles from './login.module.scss';
import Button from '../../components/button/button';
import { Link } from 'react-router-dom';
import { FieldValues, useForm, SubmitHandler } from 'react-hook-form';
import { DevTool } from '@hookform/devtools';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { fetchAuthorization } from '../../store/auth/auth.actions';

export const Login = () => {
	const dispatch = useAppDispatch();
	const { error } = useAppSelector((state) => state.authorization);
	console.log('ошибка из компонента с бека при авторизации', error);
  interface IInputs {
    email: string;
    password: string;
  }
  const {
  	register,
  	handleSubmit,
  	control,
  	formState: { errors }
  } = useForm<IInputs>({ mode: 'onBlur' });
  const onSubmit: SubmitHandler<IInputs> = (data) =>
  	dispatch(fetchAuthorization(data));

  return (
  	<div>
  		<h2>Вход</h2>
  		{/* {error && <p style={{ color: 'red' }}>{error}</p>} */}
  		<form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
  			<div className={styles.input}>
  				<label htmlFor="email">Ваш email*</label>
  				<input
  					id="email"
  					{...register('email', {
  						required: 'Обязательное поле',
  						validate: {
  							isEmail: (value) =>
  								/^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i.test(value) ||
                  'Введите корректный ящик'
  						}
  					})}
  					type="text"
  					className={styles.inputItem}
  				/>
  				{errors.email?.message && (
  					<p style={{ color: 'red' }}>{errors.email?.message}</p>
  				)}
  			</div>
  			<div className={styles.input}>
  				<label htmlFor="password">Ваш пароль*</label>
  				<input
  					id="password"
  					{...register('password', {
  						required: 'Обязательное поле',
  						validate: {
  							number: (value) =>
  								/\d/.test(value) ||
                  'Пароль должен содержать хотя бы одну цифру!',
  							letter: (value) =>
  								/[A-Za-z]/.test(value) ||
                  'Пароль должен содержать хотя бы одну букву!',
  							upperLetter: (value) =>
  								/[A-Z]/.test(value) ||
                  'Пароль должен содержать одну заглавную букву!'
  						}
  					})}
  					type="password"
  					className={styles.inputItem}
  				/>
  				{errors.password?.message && (
  					<p style={{ color: 'red' }}>{errors.password?.message}</p>
  				)}
  			</div>

  			<Button appearance="big">Войти</Button>
  		</form>
  		<DevTool control={control} />
  		<div className={styles.navigation}>
  			<div>
          Еще нет аккаунта?{' '}
  				<Link
  					style={{ color: '#ffa600' }}
  					className={styles.href}
  					to="/auth/register"
  				>
            Регистрация
  				</Link>
  			</div>
  			<div>
  				<Link style={{ color: '#ffa600' }} className={styles.href} to="/">
            На главную
  				</Link>
  			</div>
  		</div>
  	</div>
  );
};
